<template>
	<transition name="mask">
		<div class="Alert" v-show="isShowMask">
			<div class="mask" @click="closeAlert">
			    <div class="mask_content" @click.stop>
			        <div class="title">
			            {{title}}
			            <i class="el-icon-circle-close" @click="closeAlert"></i>
			        </div>
			        <div class="content">
			        	<slot name="content"></slot>
			        </div>
			    </div>
			</div>
		</div>
	</transition>
</template>
<script>
	export default {
		props: {
			title: {
				type: String,
				default: '标题'
			},
			isShowMask: {
				type: Boolean,
				default: true
			}
			
		},
		data() {
			return {

			}
		},
		methods: {
			//关闭弹窗
			closeAlert() {
			    this.$emit('update:isShowMask', false)
			},
		}
	}
</script>
<style>
	/* 过渡时的样式和时间 */
	.mask-enter-active,
	.mask-leave-active {
	    transition: all 0.5s;
	}

	/* 进入前/消失后的样式 */
	.mask-enter,
	.mask-leave-to {
	    opacity: 0;
	}
	.Alert {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		z-index: 3;
		text-align: center;
	}
	.Alert .mask {
		width: 100%;
		height: 100%;
		text-align: center;
	}
	.Alert .mask:after {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	.Alert .mask .mask_content {
		display: inline-block;
		vertical-align: middle;
		text-align: left;
		border-radius: 3px;
		overflow: hidden;
	}
	.Alert .mask .mask_content > .title {
		min-width: 300px;
		color: #fff;
		background-color: rgba(42, 88, 173,.9);
		height: 40px;
		line-height: 40px;
		padding-left: 10px;
	}
	.Alert .mask .mask_content .content {
		background-color: #fff;
	}
	.Alert .mask .mask_content .title i {
		float: right;
		height: 40px;
		line-height: 40px;
		margin-right: 10px;
		font-size: 25px;
		cursor: pointer;
	}
</style>